<template>
  <h1 align="center">Corax 发版历史</h1>
  <div>
    <el-button style="float: right; margin-top: 15px; margin-right: 20px;" type="primary" @click="getReleases()">刷新</el-button>
    <el-table
      :data="releaseList"
      style="width: 100%;font-size: 15px;"
      :fit="true"
      :show-header-border="true"
      :default-sort="{prop: 'status', order: 'descending'}">
      <el-table-column fixed prop="versionNo" label="版本号" align="center" sortable></el-table-column>
      <el-table-column label="访问链接" align="center">
        <template v-slot="scope">
          <el-link :href="scope.row.accessLink" target="_blank">{{ scope.row.accessLink }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="username" label="管理账号" align="center"></el-table-column>
      <el-table-column prop="password" label="管理密码" align="center" ></el-table-column>
      <el-table-column prop="status" label="服务状态" align="center" sortable>
        <template v-slot="scope">
          <el-tag :type="scope.row.status === 1 ? 'success' : 'info'">
            {{ scope.row.status === 1 ? '在线' : '离线' }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import httpClient from '@/utils/request';
import common from './common/Config'
import { ElMessage } from 'element-plus';
export default {
  data() {
    return {
      releaseList: [],
      getReleasesData: {
        url: common.releaseList,
      },
      firstLoad: true
    };
  },
  beforeMount() {
    this.getReleases();
  },
  methods: {

    getReleases() {
      httpClient.get(this.getReleasesData.url)
      .then(res => {
        this.releaseList = res
        if (!this.firstLoad) {
          ElMessage({
          message: '刷新成功',
          type: 'success'
        });
        }
        this.firstLoad = false
      })
      .catch(res => {
        ElMessage.error('刷新失败')
      })
    }
  }
};
</script>
